<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to Semg panl!</title>
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css" media="screen,projection"/>
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>

<nav class="valign-wrapper">
    <a href="/" class="brand-logo center">Logo</a>
</nav>

<body class="grey lighten-5">
<div class="container">
    <!--pc-->
    <div class="row hide-on-med-and-down">
        <div class="col s12">
        </div>
        <div class="col s6">
            <div class="card-panel">
                <a href="/aunt/login">
                    <div style="height: 450px">
                        <h1>Login ></h1>
                    </div>
                </a>
            </div>
        </div>

        <div class="col s6">
            <div class="card-panel">
                <div style="height: 450px">
                    <h1 class="">Register</h1>
                    <form action="/aunt/register" method="POST">
                        <div class="row white">
                            <div class="section">
                                <div class="input-field col s12">
                                    <i class="material-icons prefix">account_circle</i>
                                    <input id="username" name="username" type="text" class="validate">
                                    <label for="username">用户名(游戏内)</label>
                                </div>
                                <div class="input-field col s12">
                                    <i class="material-icons prefix">email</i>
                                    <input id="email" name="email" type="text" class="validate">
                                    <label for="email">电子邮件</label>
                                </div>
                                <div class="input-field col s12">
                                    <i class="material-icons prefix">vpn_key</i>
                                    <input id="password" name="password" type="text" class="validate">
                                    <label for="password">密码</label>
                                </div>
                                <div class="col s1 offset-s9 section">
                                    <input type="submit" class="btn">
                                </div>
                                <div class="col s12"><br></div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--mobile-->
    <div class="row hide-on-large-only">
        <div class="col s12">
            <div class="card-panel deep-orange lighten-1">
                <div style="height: 200px">
                    Welcome Here! login mode
                </div>
            </div>
        </div>
        <div class="col s12">
            <div class="card-panel purple darken-3">
                <div style="height: 200px">
                    Welcome Here! register mode
                </div>
            </div>
        </div>
    </div>
    <!--news-->
    <div class="divider"></div>
    <h2>News</h2>
    <div class="row">
        <div class="col s12">
            <ul class="collection">
                <li class="collection-item avatar">
                    <img src="images/yuna.jpg" alt="" class="circle">
                    <span class="title">标题</span>
                    <p>第一行 <br>
                        第二行
                    </p>
                    <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
                </li>
                <li class="collection-item avatar">
                    <i class="material-icons circle">folder</i>
                    <span class="title">标题</span>
                    <p>第一行 <br>
                        第二行
                    </p>
                    <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
                </li>
                <li class="collection-item avatar">
                    <i class="material-icons circle green">insert_chart</i>
                    <span class="title">标题</span>
                    <p>第一行 <br>
                        第二行
                    </p>
                    <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
                </li>
                <li class="collection-item avatar">
                    <i class="material-icons circle red">play_arrow</i>
                    <span class="title">标题</span>
                    <p>第一行 <br>
                        第二行
                    </p>
                    <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
                </li>
            </ul>
        </div>
    </div>
</div>
</div>
</body>

<footer class="page-footer">
    <div class="container">
        <div class="row">
            <div class="col l6 s12">
                <h5 class="white-text">页脚内容</h5>
                <p class="grey-text text-lighten-4">你可以用行和列来组织你的页脚内容。</p>
            </div>
            <div class="col l4 offset-l2 s12">
                <h5 class="white-text">链接</h5>
                <ul>
                    <li><a class="grey-text text-lighten-3" href="#!">链接 1</a></li>
                    <li><a class="grey-text text-lighten-3" href="#!">链接 2</a></li>
                    <li><a class="grey-text text-lighten-3" href="#!">链接 3</a></li>
                    <li><a class="grey-text text-lighten-3" href="#!">链接 4</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer-copyright">
        <div class="container">
            © 2014 Copyright 文本
            <a class="grey-text text-lighten-4 right" href="#!">更多链接</a>
        </div>
    </div>
</footer>

</html>